<template>
  <u-page class="example-upopup-page">
    <u-popup-page isSwiper :swiperInfo="swiperMap.swiperList" v-if="typeMap.type === 'swiper'" :currentIndex="swiperMap.currentIndex">
      <template #swiper>
        <swiper class="swiper-box">
          <swiper-item v-for="(item, index) in swiperMap.swiperList" :key="index">
            <view class="swiper-item">
              {{item.content}}
            </view>
          </swiper-item>
        </swiper>
      </template>
    </u-popup-page>
    <u-popup-page
      v-if="typeMap.type === 'page'"
      title="标题"
    >
      <template #content>
        <view v-for="(item, index) in 30" :key="index">aabbcc{{item}}</view>
      </template>
    </u-popup-page>
  </u-page>
</template>
<script lang="ts">
export default {
  name: 'exampleUpopupPage'
}
</script>
<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
const typeMap = {
  type: ''
}
onLoad((option) => {
  typeMap.type = option.type as string
})
const swiperMap = reactive({
  currentIndex: 0,
  swiperList: [
    { content: 1 },
    { content: 2 },
    { content: 3 }
  ],
  swiperChange(e) {
    swiperMap.currentIndex = e.detail.current
  },
})
</script>

<style lang="scss" scoped>
.swiper-item {
  background-color: #fff;
  margin: 20px 10px;
  padding: 20px;
  height: 60vh;
}
</style>
